<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs
				:list="tabList"
				lineWidth="60"
				@click="sectionChange"
				:activeStyle="{
					color: '#3496FB',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}">
			</u-tabs>
			<!-- <u-subsection :list="tabList" :current="current" mode="subsection" @change="sectionChange"></u-subsection> -->
			
			<view class="search">
				<view class="search-item">
					<u-search placeholder="输入项目名称筛选"
						shape="square"
						v-model="searchValue"
						:showAction="false"
						@change="searchChange">
					</u-search>
				</view>
				<view class="add-button" @click="searchValue = ''">
					清空
				</view>
			</view>
		</u-sticky>
		
		<view style="margin-top: 100rpx;" v-if="list.length < 1">
			<u-empty
				text="暂无数据"
				icon="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/005b6980c9514d1e8e4a0cee0de018e4.png">
			</u-empty>
		</view>
		
		<view style="background-color: #fff;" v-else>
			<!-- <u-collapse accordion> -->
				<view v-for="(arr,arrIndex) in list">
					<uni-group :title="arr.fzrName">
						<u-swipe-action>
							<u-swipe-action-item
								:options="options" 
								v-for="(item,index) in arr.data"
								:key="item.id"
								@click="delItem(item.id)">
								<view class="swipe-action" :class="arr.length == index+1?'':'u-border-bottom'" @click="gotoPage('/subPackTask/taskButler/totalTask/detail?spType=用户&id='+item.id)">
									<view class="PhotographerBoxL">
										<u-avatar
											v-if="item.avatar"
											:src="item.avatar"
											shape="circle"
											size="45"
											bgColor="#0087FC">
										</u-avatar>
										<u-avatar
											v-else
											:text="item.fzrName.slice(1)"
											:fontSize="item.fzrName.length > 2?15:20"
											shape="circle"
											size="45"
											bgColor="#0087FC">
										</u-avatar>
									</view>
									<view class="PhotographerBoxR">
										<view class="text-sm text-bold">任务名称：{{item.taskName}}</view>
										<view class="text-sm text-grey margin-top-xs">所属项目：{{item.projectName}}</view>
										<view class="text-sm text-grey margin-top-xs">负责人：{{item.fzrName}}</view>
									</view>
									
									<view class="status">
										<span v-if="item.status == 0 && current != 3"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/447e42ce5d85454f9f458dc18d522bec.png" /></span>
										<span v-if="item.status == 1 && current != 3"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/49d884b6a24c4f9cb645b551a974dec3.png" /></span>
										<span v-if="item.status == 2 && current != 3"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/a2ef1372c79d42aeb3adec735fd6826e.png" /></span>
										<span v-if="item.status == 3 && current != 3"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/87530e13f0954b08b12f43b8998a6e14.png" /></span>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</uni-group>
					<!-- <u-collapse-item :title="indexList[arrIndex]" :name="indexList[arrIndex]">
						<u-swipe-action>
							<u-swipe-action-item
								:options="options" 
								v-for="(item,index) in arr"
								:key="item.id"
								@click="delItem(item.id)">
								<view class="swipe-action" :class="arr.length == index+1?'':'u-border-bottom'" @click="gotoPage('/subPackTask/taskButler/totalTask/detail?spType=用户&id='+item.id)">
									<view class="PhotographerBoxL">
										<u-avatar
											v-if="item.avatar"
											:src="item.avatar"
											shape="circle"
											size="45"
											bgColor="#0087FC">
										</u-avatar>
										<u-avatar
											v-else
											:text="item.fzrName.slice(1)"
											:fontSize="item.fzrName.length > 2?15:20"
											shape="circle"
											size="45"
											bgColor="#0087FC">
										</u-avatar>
									</view>
									<view class="PhotographerBoxR">
										<view class="text-sm text-bold">任务名称：{{item.taskName}}</view>
										<view class="text-sm text-grey margin-top-xs">负责人：{{item.fzrName}}</view>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</u-collapse-item> -->
				</view>
			<!-- </u-collapse> -->
			
		</view>
		
		<u-calendar
			:show="dateShow"
			:maxDate="String(new Date())"
			:minDate="minDate"
			monthNum="7"
			:closeOnClickOverlay="true"
			@close="dateShow = false"
			@confirm="dateConfirm">
		</u-calendar>
		
		<uni-fab
			:content="content"
			horizontal="right"
			vertical="bottom"
			direction="vertical"
			@trigger="trigger">
		</uni-fab>
	</view>
</template>

<script>
	import { list,del,count } from '@/api/task.js'
	export default {
		data() {
			return {
				dataList:[],
				searchValue:'',
				pageNum:1,
				list:[],
				indexList:[],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				// tabList:['全部任务', '逾期任务', '我负责的', '已完成'],
				tabList: [],
				current: 0,
				content: [
					{
						path:'/subPackTask/taskButler/add',
						iconPath: 'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/acaaf8359758412399b3782efaeae1c9.png',
						selectedIconPath: 'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/acaaf8359758412399b3782efaeae1c9.png',
						text: '标准任务',
						active: false
					},
				],
				postNames:[],
			}
		},
		onReachBottom(){
			this.pageNum += 1
			this.getList()
		},
		onPullDownRefresh(){
			this.pageNum = 1
			this.dataList = []
			this.list = []
			this.getList()
			uni.stopPullDownRefresh()
		},
		onShow() {
			
		},
		onLoad() {
			this.postNames = uni.getStorageSync("loginInfo").postNames
			this.inti()
		},
		methods: {
			/** 根据传入的字段进行分组
			 * @param arr 需要分组的数组
			 * @param property 分组的字段
			 * @returns {*[]} 已分好组的数组
			 */
			abilitySort(arr, property) {
			  let map = {};
			  for (let i = 0; i < arr.length; i++) {
			    const ai = arr[i];
			    if (!map[ai[property]]) map[ai[property]] = [ai];
			    else map[ai[property]].push(ai);
			  }
			  let res = [];
			  Object.keys(map).forEach((key) => {
			    res.push({ [property]: key, data: map[key] });
			  });
			  return res;
			},
			inti(){
				this.pageNum = 1
				this.dataList = []
				this.list = []
				this.indexList = []
				this.searchValue = ''
				this.getCount()
				this.getList()
			},
			async getCount(){
				const { data } = await count();
				if(data.code == 200){
					this.tabList = data.data
				}
			},
			async getList(){
				let params = {
					taskName:this.searchValue,
					current:this.current,
					pageNum:this.pageNum,
				}
				const { data } = await list(params);
				if(data.code == 200){
					// for(var key in data.data){
					// 	this.list.push(data.data[key])
					// 	this.indexList.push(key)
					// }
					this.dataList = [...this.dataList,...data.rows]
					this.list = this.abilitySort(this.dataList,'fzrName')
					this.indexList = this.list.map(e=>e.fzrName)
				}
			},
			async delTask(id){
				const { data } = await del(id);
				if(data.code == 200){
					this.pageNum = 1
					this.dataList = []
					this.list = []
					this.indexList = []
					this.getList()
					uni.showToast({ title: '任务删除成功', icon: 'none' })
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
			trigger(e){
				this.gotoPage(e.item.path)
			},
			sectionChange(item) {
				console.log(item.index)
				this.current = item.index;
				this.pageNum = 1
				this.dataList = []
				this.list = []
				this.indexList = []
				this.getList()
			},
			searchChange(e){
				this.searchValue = e
				this.pageNum = 1
				this.dataList = []
				this.list = []
				this.indexList = []
				this.getList()
			},
			delItem(id){
				if(this.current == 3){
					uni.showToast({ title: '任务已完成，无法删除', icon: 'none' })
					return
				}
				if(this.postNames.indexOf('总经理')<0&&this.postNames.indexOf('副总经理')<0&&this.postNames.indexOf('生产经理')<0){
					uni.showToast({ title: '您没有操作权限', icon: 'none' })
					return
				}
				let that_ = this
				uni.showModal({
					title: "是否确定？",
					content: "是否确定删除任务",
					confirmText: '是',
					cancelText: '否',
					success:  res => {
						if (res.confirm){
							that_.getCount()
							that_.delTask(id)
						}
					}
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
	
	.add-button{
		line-height: 104rpx;
		color: #0081ff;
	}
	
	.PhotographerBoxL{
		box-sizing: border-box;
		width: 15%;
		padding: 25rpx;
	}
	.PhotographerBoxR{
		box-sizing: border-box;
		padding: 25rpx;
	}
	.status {
		position: absolute;
		top: 50%;
		right: 0;
		width: 100rpx;
		height: 100rpx;
		transform: translateY(-50%);
	}
	.status image {
		width: 100%;
		height: 100%;
	}
</style>
